<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; utf-8">
    <title>我的中心</title>
    <%@ include file="../../static/top.jsp" %>

    <style>
        
        th{
        	min-width: 80px;
        }
    </style>
</head>
<body class="sticky-header">

<section> <!-- left side start-->
    <%@ include
            file="../../static/menu.jsp" %> <!-- left side end-->

    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->


        <%@ include file="../../static/header.jsp" %>

        <div class="wrapper">
			<div class="page-heading">
				<ul class="breadcrumb">
					<li><a href="#">我的采集</a></li>
					<li><a href="/action/my/m/toTemplateConfig?mid=a1&aid=ch12">模板配置</a></li>
					<li class="active">调整模板</li>
				</ul>
			</div>
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">链接列表</div>
                        <div class="panel-body">

                            

                            <div class="col-md-12">

                                <div class="panel ">
                                    <div class="panel-heading">${title}</div>
                                    <div class="panel-body" >
                                    <div class="col-md-12">

			                                <form class="form-horizontal" role="form">
			                                    <div class="form-group col-sm-10">
			                                        <button id="addUrlBtn" type="button"
			                                                class="  btn btn-info">关联链接
			                                        </button>
													<button id="startBtn" type="button"
			                                                class="  btn btn-danger">开始采集
			                                        </button>
			                                    </div>
			                                </form>
			
			                            </div>
                                        <table class="table table-bordered table-striped table-condensed">
                                            <thead>
                                            <tr id="thead">
 											
                                                <td >ID</td>
                                              
                                                <td >列名</td>
                                               	<td >类型</td>
                                              	<td >列表path</td>
                                              	<td >元素path</td>
                                              	<td >附加</td>
                                              	<td >操作</td>
                                            </tr>
                                            </thead>
                                            <tbody id="tbody">


                                            </tbody>
                                        </table>

                                    </div>
                                </div>
                               

                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <!--body wrapper end-->


        <!--footer section start-->
        <%@ include file="../../static/footer.jsp" %>

        <!--footer section end-->

        
        
    </div>

    </section>
    
    <div tabindex="-1" role="dialog" id="opCell"
             class="modal fade bs-example-modal-lg" style="display: none;">
            <div role="document" class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" data-dismiss="modal" aria-label="Close"
                                class="close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title">附加操作</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            
                            
                            <div class="form-group">
                               <div class="col-sm-4 checkbox" >
                                <label class="control-label col-sm-8">添加空元素</label>
                                <input type="checkbox" id="iscell" style="margin-top:10px" class="col-sm-4 " value=""> 
                                <input type="hidden" id="did" value=""> 
                               </div>
                                <div class="col-sm-8" >
                                	<select id="addcell" disabled class="form-control">
                                	    <option value=""></option>
                                		<option value="1">1</option>
                                		<option value="2">2</option>
                                		<option value="3">3</option>
                                		<option value="4">4</option>
                                		<option value="5">5</option>
                                		<option value="6">6</option>
                                		<option value="7">7</option>
                                		<option value="8">8</option>
                                		<option value="9">9</option>
                                		<option value="10">10</option>
                                	</select>
                                    
                                </div>
                            </div>
                            <div class="form-group">
                               <div class="col-sm-4 checkbox" >
                                <label class="control-label col-sm-8">启用JS</label>
                                <input type="checkbox" id="isjs" style="margin-top:10px" class="col-sm-4 " value=""> 
                               </div>
                               
                            </div>
                            
                        </form>
                    </div>
                    <div class="modal-footer">
                     	
                        <button type="button" class="btn btn-info" id="saveOpBtn">保存 </button>
                        <button type="button" class="btn btn-success" id="closeOpBtn" >关闭</button>
                    </div>
                </div>
            </div>
        </div>
        
        
        
        <div tabindex="-1" role="dialog" id="editDetail"
             class="modal fade bs-example-modal-lg" style="display: none;">
            <div role="document" class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" data-dismiss="modal" aria-label="Close"
                                class="close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title">编辑元素</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            
                            
                            <div class="form-group">
                              <input type="hidden" id="edid" value="">
                             
                             
                             
                               <label class="control-label col-sm-2">属性名</label>
                               <div class="col-sm-10 ">
                               	  <input type="text" id="cname"  class="form-control" value="">  
                               </div>	
                                
                            </div>
                            <div class="form-group">
                              
                                <label class="control-label col-sm-2">类型</label>
                                 <div class="col-sm-10 ">
                               		<select id="ctype"  class="form-control">
                                	
                                		<option value="list">list</option>
                                		<option value="element">element</option>
                                		
                                	</select>
                               </div>
                               
                            </div>
                             <div class="form-group">
                                <label class="control-label col-sm-2">路径</label>
                                <div class="col-sm-5 ">
                                <input type="text" id="list_path"  class="form-control" value="">  
                               </div>
                               <div class="col-sm-5 ">
                                <input type="text" id="node_path"  class="form-control" value="">  
                               </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2">内容</label>
                                <div class="col-sm-10" id="newTableDiv">
                                    <textarea rows="6" class="form-control" id="testHtml"></textarea>
                                </div>
                            </div>
                            
                        </form>
                    </div>
                    <div class="modal-footer">
                    	<button type="button" class="btn btn-primary" id="testBtn">测试 </button>
                        <button type="button" class="btn btn-info" id="saveDetailBtn">保存 </button>
                        <button type="button" class="btn btn-success" id="closeDetailBtn" >关闭</button>
                    </div>
                </div>
            </div>
        </div>

<script type="text/javascript">

var pageSize = 20, pageinit = true;	
var request_id = '${request_id}';
$(document).ready(function () {
	queryList(1, true);
	
	 $("#saveOpBtn").click(function () {
		 var id = $("#did").val();
		 var op = {};
		 
		 if($("#iscell").is(':checked')){
			 op.addCell=$("#addcell").val();
		 }
		 
		 if($("#isjs").is(':checked')){
			 op.cellType=1;
		 }
		 var str = JSON.stringify(op);
		 $.post("/action/my/m/upTempDetailOp",{"id":id,"op":str},function(data){
			 if(data.code==200){
				 layer.msg("操作成功")
				 $("#opCell").modal("hide");
			 }else{
				 layer.msg(data.msg)
			 }
		 });
	     
	 });
	 $("#saveDetailBtn").click(function () {
		 var id = $("#edid").val();
		 var cname = $("#cname").val();
		 var ctype = $("#ctype").val();
		 var list_path = $("#list_path").val();
		 var node_path = $("#node_path").val();
		 $.post("/action/my/m/upTempDetailEle",{"id":id,"cname":cname,"ctype":ctype,"list_path":list_path,"node_path":node_path},function(data){
			 if(data.code==200){
				 layer.msg("操作成功")
				 $("#opCell").modal("hide");
			 }else{
				 layer.msg(data.msg)
			 }
		 });
	     
	 });
	 
	 
	$("#iscell").click(function () {
		 
	   if($(this).is(':checked')){
		   $("#addcell").removeAttr("disabled");
	   }else{
		   $("#addcell").attr("disabled",true);
	   }
	     
	 });
	
	
	
	 

	 $("#closeOpBtn").click(function () {
		
		$("#did").val("");
        $("#opCell").modal("hide");
     })
      $("#closeDetailBtn").click(function () {
		
		$("#edid").val("");
        $("#editDetail").modal("hide");
     })
     
      $("#testBtn").click(function () {
    	 
		  var ctype = $("#ctype").val();
		  var list_path = $("#list_path").val();
		  var node_path = $("#node_path").val();
    	  $.get("/action/my/m/testDetailPath",{"request_id":request_id,"type":ctype,"list_path":list_path,"node_path":node_path},function(data){
    		  if(data.code==200){
    			  alert(data.data)
    			  $("#testHtml").val(data.data)
    		  }
    		  
    	  });
    	  
     })
     
     
     
     
});
    
function queryList(page, pageinit) {
	$("#tbody").empty();
	var status = $("#status").val();
	 $.get("/action/my/m/getTempDetail",{"request_id":request_id},function(data){
		 var contain, content;
			var _totalPage = data.maxPage;
			if (data.data.length) {
				for (var i = 0; i < data.data.length; i++) {
					contain = data.data[i];
					
					content += "<tr><td>"+ contain.id + "</td>" ;
					content += "<td>"+ contain.column_name + "</td>" ;
					content += "<td>"+ contain.column_type + "</td>" ;
					content += "<td>"+ contain.list_path + "</td>" ;
					content += "<td>"+ contain.node_path + "</td>" ;
					content += "<td>"+ contain.op + "<a href='javascript:void(0)' onclick='opExts("+contain.id+","+contain.op+")'>编辑</a></td>" ;
					content += "<td><a href='javascript:void(0)' onclick='opEle("+contain.id+")'>编辑元素</a></td>";
					content += "</tr>" ;

				}
				$("#tbody").append(content);
			}
		
	  })
	
}
 

function opEle(id){
	
	 $("#edid").val(id);
	 $("#cname").val("");
	 $("#ctype").val("");
	 $("#list_path").val("");
	 $("#node_path").val("");
	 $("#testHtml").val("")
	 $.get("/action/my/m/getTempDetailById",{"id":id},function(data){
		 if(data.code==200){
			 var row = data.data;
			 $("#cname").val(row.column_name);
			 $("#ctype").val(row.column_type);
			 $("#list_path").val(row.list_path);
			 $("#node_path").val(row.node_path);
			 
			 $("#editDetail").modal("show");
		 }
	 })
	 
	 
	 
}

function opExts(id,op){
	 if(op!=null&&op!=''&&op!=undefined){
		 if(op.addCell){
		   $("#iscell").prop("checked",true); 
		   $("#addcell").removeAttr("disabled");
		   $("#addcell").val(op.addCell);
		 }else{
			 $("#iscell").prop("checked",false); 
			 $("#addcell").attr("disabled",true);
			 $("#addcell").val("");
		 }
		 if(op.cellType){
			 if(op.cellType==1||op.cellType=="1"){
				 $("#isjs").prop("checked",true); 
			 }else{
				 $("#isjs").prop("checked",false); 
			 }
		 }else{
			 $("#isjs").prop("checked",false); 
		 }
	 }else{
		 $("#iscell").prop("checked",false); 
		 $("#addcell").attr("disabled",true);
		 $("#addcell").val("");
		 $("#isjs").prop("checked",false); 
	 }
	 $("#did").val(id);
	 $("#opCell").modal("show");
}

</script>

</body>
</html>
